<template>
  <svg
    class="yindu-icon"
    width="16px"
    height="16px"
    viewBox="0 0 16 16"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <defs>
      <polygon id="phone-path-1" points="0 0 16 0 16 15.975 0 15.975"></polygon>
    </defs>
    <g
      id="页面-1"
      stroke="none"
      stroke-width="1"
      fill="none"
      fill-rule="evenodd"
    >
      <g id="切图" transform="translate(-367.000000, -111.000000)">
        <g id="编组-6" transform="translate(367.000000, 111.000000)">
          <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
          <g id="编组">
            <mask id="phone-mask-2" fill="white">
              <use xlink:href="#phone-path-1"></use>
            </mask>
            <g id="Clip-2"></g>
            <path
              d="M3.792,0.975 C3.639,0.975 3.493,1.034 3.382,1.14 L1.595,2.843 C1.211,3.179 1,3.644 1,4.133 C1,7.003 2.134,9.716 4.192,11.772 C6.255,13.837 8.972,14.975 11.841,14.975 C12.33,14.975 12.795,14.763 13.118,14.395 L14.833,12.593 C14.941,12.48 15,12.334 15,12.182 C15,11.985 14.9,11.799 14.734,11.687 L12.185,9.866 C11.946,9.694 11.591,9.736 11.395,9.957 L10.11,11.409 C9.758,11.764 9.341,11.948 8.917,11.951 L8.909,11.951 C7.974,11.951 6.748,11.306 5.708,10.266 C4.665,9.223 4.02,7.994 4.024,7.058 C4.025,6.634 4.21,6.217 4.543,5.884 L6.016,4.58 C6.145,4.466 6.219,4.303 6.219,4.133 C6.219,4.009 6.181,3.89 6.108,3.788 L4.295,1.25 C4.176,1.075 3.99,0.975 3.792,0.975 M11.841,15.975 C8.704,15.975 5.736,14.734 3.485,12.479 C1.238,10.235 0,7.271 0,4.133 C0,3.356 0.336,2.617 0.921,2.105 L2.691,0.416 C3.372,-0.234 4.583,-0.105 5.116,0.678 L6.923,3.206 C7.117,3.481 7.219,3.801 7.219,4.133 C7.219,4.59 7.021,5.027 6.677,5.329 L5.228,6.612 C5.166,6.675 5.025,6.848 5.024,7.061 C5.021,7.721 5.58,8.724 6.415,9.559 C7.248,10.392 8.249,10.951 8.908,10.951 C9.128,10.953 9.299,10.808 9.383,10.724 L10.646,9.296 C11.167,8.702 12.121,8.592 12.766,9.051 L15.306,10.866 C15.736,11.157 16,11.652 16,12.182 C16,12.593 15.843,12.984 15.557,13.284 L13.856,15.069 C13.358,15.639 12.618,15.975 11.841,15.975"
              id="Fill-1"
              fill="#D8D8D8"
              mask="url(#phone-mask-2)"
            ></path>
          </g>
        </g>
      </g>
    </g>
  </svg>
</template>

<script setup lang="ts">
type Props = {
  fill?: string;
};

const props = withDefaults(defineProps<Props>(), {
  fill: "#D8D8D8",
});

const fillColor = computed(() => {
  return props.fill;
});
</script>
<style scoped lang="less">
.yindu-icon {
  & path {
    fill: v-bind(fillColor);
  }
}
</style>
